<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/css-doodle@0.15.3/css-doodle.min.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css" />
  <title>开发</title>
  <style>
    table {
      border-collapse: collapse;
    }

    .wrap {
      height: 100%;
      left: 10px;
      right: 10px;
      background-color: bisque;
      position: absolute;
    }

    .A {
      font-size: 20px;
      text-align: center;
      background-color: blueviolet;
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      padding-top: 50%;
      transform: translate(0, -50%);
    }

    .f {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <table style="table-layout: fixed;">
    <tr style="height: 100px;">
      <td style="width: 100px">A</td>
      <td style="width: 100px">B</td>
      <td style="width: 100px">C</td>
      <td style="width: 100px">D</td>
      <td style="width: 100px">E</td>
      <td style="width: 100px">F</td>
      <td style="width: 100px">G</td>
      <td style="width: 100px">H</td>
      <td style="width: 100px">I</td>
      <td style="width: 100px">J</td>
      <td style="width: 100px">K</td>
      <td style="width: 100px">L</td>
      <td style="width: 100px">M</td>
      <td style="width: 100px">N</td>
      <td style="width: 100px">O</td>
      <td style="width: 100px">P</td>
      <td style="width: 100px">Q</td>
      <td style="width: 100px">R</td>
    </tr>
    <tr>
      <td style="border-top: 1px solid #ff0000;border-bottom: 1px solid #ff00ff;">1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <td style="border-top: 1px solid #ff0000;">1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
  </table>
  <div contenteditable="true">测试东西</div>
  <div
    style="height: 300px;width: 350px;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;justify-content: space-between;">
    <div style="height: 100px;width: 100px;background-color: #ffff00;"></div>
    <div style="height: 100px;width: 100px;background-color: #ffff00;"></div>
    <div style="height: 100px;width: 100px;background-color: #ffff00;"></div>
    <div style="height: 100px;width: 100px;background-color: #ffff00;"></div>
    <div style="height: 100px;width: 100px;background-color: #ffff00;"></div>
    <div style="height: 100px;width: 100px;background-color: #ffff00;"></div>
    <div style="width: 100px"></div>
  </div>
</body>

</html>